<template>
  <div class="login-container">
    <div class="login">
      <img src="@/assets/images/logo.png" alt="">
    </div>
    <div class="info">
      <van-cell-group inset>
        <van-field v-model="tel" label="手机号" type="tel" placeholder="请输入手机号"/>
        <van-field v-model="password" label="密码" type="password" placeholder="请输入密码"/>
      </van-cell-group>
    </div>
    <div class="btn">
      <van-button color="#684886" type="primary" block @click="onLogin">登录</van-button>
    </div>
    <div class="other">
      <div class="free" @click="onFree">没有账号?免费注册</div>
      <div class="forget">忘记密码</div>
    </div>
  </div>
</template>
<script setup lang="ts">
import {ref} from "vue";
import {useTokenStore} from "@/store/Login";
import {Md5} from "ts-md5"
import {useRoute, useRouter} from "vue-router";
const tel=ref<string>('')
const password=ref<string>('')
const tokenStore=useTokenStore()
const router=useRouter()
const route=useRoute()
const onLogin= ()=>{
  tokenStore.setToken({tel,password,verify:Md5.hashStr('iwenwiki')},()=>{
   route.query.redirect?router.replace(route.query.redirect as string):router.replace('/')
  },()=>{})
}
const onFree=()=>{
  router.push('/register')
}
</script>

<style scoped lang="less">
.login-container{
  .login{
    width: 100%;
    margin-top: 50px;
    text-align: center;
    img{
      width: 150px;
    }
  }
  .info{
    margin-top: 50px;
  }
  .btn{
    padding: 20px;
  }
  .other{
    display: flex;
    padding:0 20px 20px 20px;
    .free{
      flex: 1;
      text-align: left;
      font-size: 14px;
    }
    .forget{
      flex: 1;
      text-align: right;
      font-size: 14px;
    }
  }
}
</style>